<template>
    <div class="main-box">  
        <div class="main">
            <p class="p-title">
                {{ title }}&nbsp;
                <select name="select " id="userType" v-model="queryType">
                    <option class="option" :value="item.value" v-for="(item,index) in queryTypeOption" :key="index">{{ item.label }}</option>
                </select>
            </p>
            <div class="screen">
                <div v-show="queryType === 0" class="screen-box">

                </div>
                <div v-show="queryType === 1" class="screen-box">
                    <p><span>用户名</span> <input type="text" v-model="queryUserName" placeholder="请输入用户名"></p>
                </div>
                <div v-show="queryType === 2" class="screen-box"> 
                    <p><span>起始时间：&nbsp;</span> <input type="datetime-local" v-model="queryEnd" placeholder="请输入起始时间"></p>
                    <p><span>结束时间：&nbsp;</span> <input type="datetime-local" v-model="queryStart" placeholder="请输入起始时间"></p>
                </div>
                <button class="btn" @click="queryOrder">查询</button>
                <button class="btn resetting"  @click="resetting">重置</button>
            </div>
            <div class="table">
                <div class="table-head-box">
                    <div class="table-head">
                        <span class="table-head-item" v-for="(t,i) in Object.values(orderForGoodsForm)" :key="i">{{ t }}</span>
                    </div>
                </div>
                <div class="table-body-box">
                    <div class="table-body"  
                    v-for="(item,index) in orderForGoodsFormListShow" 
                    :key="item.orderNum">
                        <span class="table-body-item" v-for="(t,i) in Object.keys(item)" :key="i">{{ item[t] }}</span>
                    </div>
                </div>
                <table border id="table" >
                    <thead class="thead">
                        <tr>
                            <td v-for="(t,i) in Object.values(orderForGoodsForm)" :key="i">{{ t }}</td>
                        </tr>
                    </thead>
                    <tbody class="tbody">
                        <tr v-for="(item,index) in orderForGoodsFormListShow" 
                    :key="item.orderNum">
                            <td v-for="(t,i) in Object.keys(item)" :key="i">{{ item[t] }}</td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
        <div class="export" @click="exportExcelFile">
            导出export
        </div>
    </div>
</template>

<script>

import { queryTypeOption, Monitor_orderForGoodsForm } from '@/utils/CommonObject';
import { downloadExcel } from '@/utils/PublicMethods';
export default {
    data() {
        return {
            title:'查询模式:',
            queryType:0,
            queryTypeOption: queryTypeOption,
            queryUserName:'',
            queryEnd:'',
            queryStart: '',
            orderForGoodsForm: Monitor_orderForGoodsForm,
            orderForGoodsFormListShow:[],
            orderForGoodsFormList:[
                {
                    orderNum:'123456789',
                    orderType:'急促',
                    userType:'管理员',
                    userName:'雷梵',
                    firingTime:'2024-03-01 22:24',
                    placeAnOrderTime:'2024-02-01 22:24',
                    Num:'1',
                    level:'2',
                    assembleTime:'1000',
                    drillTime:'1000',
                    assembleNum:'19',
                    drillNum:'1',
                    orderState: '结束',
                    orderElectricity:'',
                    orderGas:'',
                },
                {
                    orderNum:'12345678',
                    orderType:'急促',
                    userType:'管理员',
                    userName:'雷乐梵',
                    firingTime:'2024-04-01 22:24',
                    placeAnOrderTime:'2024-02-01 22:24',
                    Num:'1',
                    level:'2',
                    assembleTime:'1000',
                    drillTime:'1000',
                    assembleNum:'19',
                    drillNum:'1',
                    orderState: '结束',
                    orderElectricity:'订单用电量',
                    orderGas:'订单用气量',
                },
            ],
        }
    },
    mounted() {
        this.resetting()
    },
    methods: {
        queryOrder(){
            if (this.queryType === 0) {
            } else if (this.queryType === 1) {
                this.orderForGoodsFormListShow = this.orderForGoodsFormList.filter(order => order.userName === this.queryUserName)

            } else if (this.queryType === 2) { 
                if (this.queryEnd!== '' && this.queryStart !=='') {
                    if (new Date(this.queryEnd).getTime() <= new Date(this.queryStart).getTime()) {
                        this.orderForGoodsFormListShow = this.orderForGoodsFormList.filter(order => {
                            if(new Date(this.queryEnd).getTime() <= new Date(order.firingTime).getTime() &&
                                new Date(order.firingTime).getTime() <= new Date(this.queryStart).getTime()) {
                                return true
                            }else{
                                return false
                            }
                        })
                    } else {
                        this.$bus.$emit('openUpPop', {show:false,content:'结束时间不能小于开始时间'});
                    }
                    
                    console.log(new Date(this.queryEnd).getTime(),'new Date(this.queryEnd).getTime()',new Date(this.queryStart).getTime());
                } else {
                    this.$bus.$emit('openUpPop', {show:false,content:'查询条件不能为空'});
                }
            }
        },
        exportExcelFile(array, sheetName = '表1', fileName = 'example.xlsx') {
            downloadExcel('table',fileName)
            this.$bus.$emit('openUpPop', {show:false,successShow:true,content:'导出成功'});
        },
        resetting() {
            this.queryEnd = ''
            this.queryStart = ''
            this.queryUserName = ''
            this.orderForGoodsFormListShow = JSON.parse(JSON.stringify(this.orderForGoodsFormList))
        }
    }
}
</script>

<style lang="less" scoped>
.main-box{
    background-color: #ffffff;
    padding: 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    .main{
        background-color: #eaeaea;
        width: 100%;
        flex: 50;
        border-radius: 10px;

        .p-title{
            font-size: 1.5rem;
            font-family: 400;
            padding: 15px 0 ;
            border-bottom: 1px solid #adadad;
        }
        input,select{
            border: 1px solid #adadad;
            border-radius: 5px;
            height: 35px;
            padding: 0 0 0 10px ;
        }
        option::-ms-expand{ display: none; }
        option{
            -moz-appearance:none; /* Firefox */
            -webkit-appearance:none; /* Safari 和 Chrome */
            appearance:none;
            font-size: 17px;
            color: rgb(100, 100, 100);
            padding: 10px 0!important;
            &:hover{
                color:#fff; 
                background-color:#1E90FF;
            }
        }
        .screen{
            margin: 20px;
            display: flex;
            .btn{
                background-color: #1E90FF;
                border: none;
                padding: 5px 15px;
                border-radius: 7px;
                color: white;
                margin-left: 10px;
            }
            .resetting{

                background-color:#ff380f
            }
            .screen-box{
                display:flex ;
            }
        }
        .table{
            .table-head-box{
                border-top: 1px solid #adadad;
                border-bottom: 1px solid #adadad;
                padding: 10px 10px;
                .table-head{
                    display: flex;
                    justify-content:space-around;
                    padding: 10px 10px;
                    align-items: baseline;
                    .table-head-item{
                        flex: 1;
                        text-align: center  ;

                    }
                    .emit{
                        color: rgb(0, 0, 0);
                        text-align: center  ;
                        width: 80px!important;
                    }
                }
            }
            .table-body-box{

                .table-body{
                    display: flex;
                    justify-content:space-around;
                    padding: 10px 10px;
                    border-bottom: 1px solid #adadad;
                    align-items: baseline;
                    .table-body-item{
                        flex: 1;
                        text-align: center  ;
                    }
                    .remove{
                        color: white;
                        text-align: center  ;
                        background: #f3406a;
                        border-radius: 8px;
                        padding: 5px 0;
                        width: 80px!important;
                    }
                }
            }
        }
    }
    #table{
        width: 100%;
        display: none;
        .thead{
            tr{
                border-top: 1px solid #a9a9a9;
                border-bottom: 1px solid #a9a9a9;
                td{

                }
            }
        }
        .tbody{
            border-top: 1px solid #a9a9a9;
            border-bottom: 1px solid #a9a9a9;
        }
    }
    .export{
        background-color: #1E90FF;
        color: white;
        border-radius: 5px;
        padding: 5px 10px;
        display: inline-block;
        width: 80px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        margin: 5px 0 0px auto;
    }
}
</style>